import React from 'react'
import { Link, withRouter, routerRedux } from 'dva/router'
import * as api from '../services/api'

class Product extends React.Component {

  componentDidMount() {
    // api.getProduct().then(res => {
    //   console.log('mock-res', res.data)
    // })
    api.posts().then(res => {
      console.log('res', res.data)
    })
  }

  clickProductList = () => {
    this.props.dispatch({
      type: 'product/updateList',
      payload: {
        id: 4,
        name: '苹果'
      }
    })
  }

  clickProductListAsync = () => {
    this.props.dispatch({
      type: 'product/updateListAsync',
      payload: {
        id: 5,
        name: '香蕉'
      }
    })
  }

  clickProductListHttp = () => {
    this.props.dispatch({
      type: 'product/updateListHttp',
      payload: {
        id: 1001
      }
    })
  }

  clickGoToHandle = () => {
    this.props.history.push('/')
  }
  clickGoToReduxHandle = () => {
    this.props.dispatch(routerRedux.push('/'))
  }

  render() {
    const { title, productList } = this.props
    return (
      <div>
        Product 商品--{title}
        <ul>
          {
            productList.map(item => {
              return (
                <li key={item.id}>{item.name}</li>
              )
            })
          }
        </ul>
        <button onClick={this.clickProductList}>添加</button>
        <button onClick={this.clickProductListAsync}>添加Async</button>
        <button onClick={this.clickProductListHttp}>添加Http</button>
        <Link to="/">去首页</Link>
        <button onClick={this.clickGoToHandle}>去首页</button>
        <button onClick={this.clickGoToReduxHandle}>Redux去首页</button>
      </div>
    )
  }
}

export default withRouter(Product)
